<template>
  <div>
    <el-row class="box">
      <!-- 右移5格，自己占12格 -->
      <el-col :span="12" :offset="5">
        <!-- model：表格的数据 -->
        <!-- rules：校验的规则 -->
        <!-- ref：查找dom节点，方便检验表单 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="rolename">
            <el-input v-model="ruleForm.rolename" placeholder="角色名称">
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="权限"> -->
          <!-- 角色的权限就是查看菜单的权限 -->
          <!-- data:树形结构对应的数据 -->
          <!-- show-checkbox:显示多选框，控制节点是否可被选择 -->
          <!-- node-key:选择节点的方式 -->
          <!-- default-expanded-keys、default-expanded-keys默认展开的值和默认选择的值 -->
          <!-- default-expand-all：默认展开所有节点 -->
            <el-tree
              ref="tree"
              :data="treeData"
              show-checkbox
              node-key="id"
              :props="defaultProps"
              default-expand-all
            >
            </el-tree>
          <!-- </el-form-item> -->
          <el-form-item label="状态" prop="status">
            <!-- label的值需要是数字，因此加上冒号，保证是变量 -->
            <el-radio v-model="ruleForm.status" :label="1">正常</el-radio>
            <el-radio v-model="ruleForm.status" :label="2">禁用</el-radio>
          </el-form-item>
          <el-form-item>
            <!-- 有id说明是添加页面，没有id是修改页面，区分按钮 -->
            <el-button
              type="success"
              v-if="$route.params.id"
              @click="submitForm"
              >立即修改</el-button
            >
            <el-button type="primary" v-else @click="submitForm"
              >立即添加</el-button
            >
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表单中的数据，要提交给后台
      ruleForm: {
        rolename: "",
        // 角色具有的权限，是一个数组
        menus: [],
        // 数字类型的数据
        status: 1,
      },
      // 树形控件的配置
      defaultProps: {
        // 区分子节点的方式
        children: 'children',
        // 显示文字
        label: 'title'
      },
      // 树形控件的数据
      treeData: [],
      rules: {
        // 表单的验证规则
        rolename: [
          { required: true, message: "角色名称必填", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // 发请求，获取树形控件的数据
    this.getList();
    // 发请求，获取当前id对应的菜单数据
    if (this.$route.params.id) {
      // 通过动态路由的参数判断！！！有id说明是修改，才会发请求
      this.getInfoByid();
    }
  },
  methods: {
    // 修改菜单，先拿数据
    getInfoByid() {
      // 根据这个id拿到数据后，显示在页面上
      this.$http("/roleinfo?id=" + this.$route.params.id).then((res) => {
        // 整理数据格式，变成数组
        let arr1 = res.data.list.menus.split(',');
        this.ruleForm.menus = arr1;
        // 这是element自带的方法，作用是根据数组勾选对应的节点，显示在页面上
        // 设置勾选的节点，根据数组来设置，在显示页面时使用
        this.$refs.tree.setCheckedKeys(this.ruleForm.menus);
        this.ruleForm = res.data.list;
      });
    },
    // 获取树形结构的数据
    getList() {
    this.$http.get('/menulist', {params: {istree: 1}})
      .then(res => {
        this.treeData = res.data.list
      })
    },
    // 提交表单
    submitForm() {
      // 先校验
      this.$refs.ruleForm.validate((valid) => {
        // valid：校验结果
        if (valid) {
          // 检验成功
          // getCheckedKeys这是element自带的方法，作用是根据用户勾选的权限，生成一个对应的数组
          // 获取选中的节点，返回给后台。在发送请求时用到
          this.ruleForm.menus = this.$refs.tree.getCheckedKeys();
          this.add();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增或者修改菜单
    add() {
      // 判断新增还是修改
      if (this.$route.params.id) {
        // 修改时需要额外传id
        this.ruleForm.id = this.$route.params.id;
        this.$http
          .post("/menuedit", this.ruleForm)
          .then((res) => {
            if (res.data.code === 200) {
              // 添加成功后，返回上一页看效果
              this.$router.back();
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        // 新增角色
        this.$http.post("/roleadd", this.ruleForm)
          .then((res) => {
            if (res.data.code === 200) {
              // 添加成功后，返回上一页看效果
              this.$router.back();
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style lang="">
.box {
  background-color: #fff;
}
</style>